<script lang='ts'>
import { defineComponent, PropType, toRefs } from "vue";
import { Clock } from "@element-plus/icons";

interface CardType {
  imgUrl: string;
  title: string;
  content: string;
  date: string;
}

const props = {
  data: {
    type: Object as PropType<CardType>,
    default: {
      imgUrl: "",
      title: "未填写",
      content: "未填写",
      date: "未知",
    },
  },
};

export default defineComponent({
  name: "PortalCard",
  props,
  components: { Clock },
  setup() {},
});
</script>

<template>
  <div class="portal-serve-card">
    <div class="card-left">
      <img :src="data.imgUrl" :alt="data.title" />
    </div>
    <div class="card-right">
      <div>
        <div class="title">
          {{ data.title }}
        </div>
        <div class="content">
          {{ data.content }}
        </div>
      </div>

      <div class="date">
        <el-icon>
          <clock />
        </el-icon>
        <span>{{ data.date }}</span>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.portal-serve-card {
  width: 32%;
  min-height: 160px;
  height: 160px;
  max-height: 200px;
  padding: 20px 4px;
  background-color: #fff;
  display: flex;
  justify-content: start;
  align-items: center;
  flex: 1 1 auto;

  .card-left {
    width: 200px;
    height: 100%;

    img {
      min-width: 200px;
      height: 100%;
      width: 100%;
    }
  }

  .card-right {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    .title {
      font-weight: bold;
    }
    .content {
      color: darkgray;
    }

    .date {
      color: darkgray;
      font-size: 0.9em;
      display: flex;
      justify-content: start;
      align-items: center;
    }
  }
}
</style>